<script setup>
const props = defineProps({
  event: Object
})

const formattedDate = computed(() => {
  return new Date(props.event.date).toLocaleDateString('zh-CN')
})
</script>

<template>
  <article class="storyline-item">
    <div class="timeline-marker" />
    <div class="content">
      <h4>{{ formattedDate }} · {{ event.type }}</h4>
      <p>{{ event.summary }}</p>
      <div class="photo-strip">
        <img 
          v-for="(photo, index) in event.photos"
          :key="index"
          :src="photo.thumbnail"
          class="strip-photo"
        />
      </div>
    </div>
  </article>
</template>